<template>
  <div id="pring-box">
    <div
      class="print"
      :style="{
        ...editContextFont,
        '--scale': scale,
        transformOrigin: `10% 10%`,
      }"
      @dragover="(e) => e.preventDefault()"
      @drop="handleDrop"
    >
    <!-- @resizestop="onResizstop" -->
    <!-- @dragstop="onDragstop" -->
      <DraggerComp
        class="dragItem"
        v-for="it in currentDraggerList"
        :key="it.id"
        :parentLimitation="true"
        :z="Number(it.z)"
        :w="Number(it.w)"
        :h="Number(it.h)"
        :x="Number(it.x)"
        :y="Number(it.y)"
        :isActive="it.focused"
        
      >
        <!-- {{it.title}} -->
        <h2>{{it.title}}</h2>
      </DraggerComp>
      <EditorGrid></EditorGrid>
    </div>
  </div>
</template>

<script>
// :style="{
//      fontSize: editContextFont.fontSize + 'px',
//      fontWeight: editContextFont.fontWeight,
//      backgroundColor: editContextFont.backgroundColor,
//      width: editContextFont.width + 'px',
//      height: editContextFont.height + 'px',
//      fontStyle:editContextFont.italic?'italic':'normal'
//     }"
import { scalePrintBox } from "@/windowEvents/scale";
import { listenGlobalKeyDown } from "@/windowEvents/shortcutKey";
import EditorGrid from "./Grid/EditorGrid.vue";
export default {
  name: "PrintBox",
  data() {
    return {
      editContextFont: {},
      scale: 0.65,
      mousedown: {
        offsetX: 0,
        offsetY: 0,
      },
      currentDraggerList:[],
      mouseCoord:[],
      currentItem:{}
    };
  },
  components: {
    EditorGrid,
  },
  created() {
    this.editContextFont = this.$store.state.baseConfig;
  },
  mounted() {
    scalePrintBox(this, this.editContextFont);
    // listenGlobalKeyDown()
    this.$bus.$on("scale", (scale) => {
      this.scale = scale;
    });
    this.$bus.$on("EditContextFont", (editContextFont) => {
      this.editContextFont = { ...editContextFont };
    });
    this.$bus.$on('getMouseCoord',coord => {
      console.log(coord)
      const [x, y,it] = coord
      this.mouseCoord = coord
      this.currentItem = it
      // console.log( [x, y])
    })
  },
  beforeDestroy() {
    this.$bus.$off("EditContextFont");
  },
  watch: {},
  methods: {
    handleDrop(e) {
      for (const it of this.currentDraggerList) {
        it.focused = false;
      }
      const it = {
        ...this.currentItem,
        id: String(this.currentItem.title + new Date().getTime()),
        x:e.offsetX - this.mouseCoord[0],
        y: e.offsetY - this.mouseCoord[1],
        focused: true,
        // 新增层级最高
        z: !this.currentDraggerList.length
          ? 600
          : Math.max(...this.currentDraggerList.map((it) => it.z)) + 1,
      };
      this.currentDraggerList.push(it);
      this.$bus.$emit('currt',it)
    },
    
  },
};
</script>

<style lang="scss" scoped>
#pring-box {
  position: relative;
  overflow: auto;
  padding: 10px;
  flex: 1;

  .print {
    position: absolute;
    --scale: 0.65;
    transform-origin: 0 0;
    transform: scale(var(--scale));
    //left: 50%;
    //top: 50%;
    z-index: 0;
    width: 1920px;
    height: 1080px;
    background-color: #fff;
  }
}
</style>